上篇建立出 ListItem component 並 import 到 App component 中
但每個都長一樣的 component 看起來實在是太呆了！

我們會希望 ListItem component 要顯示的內容有些變化..

將 props 傳到 components 中 (pass props to components)

針對不同的 ListItem component 傳入不同的 property
在 App.js 中..
意思就是，將 list 中的每一個 item 作為名為 itemInfo 的 prop，傳入到 ListItem component 內

將 ListItem.js 傳入的 parameter 改為對應的 props
並回傳對應的內容 itemInfo.title 及 itemInfo.url

import React from 'react';

const ListItem = (props) => {
    return (
        <li>
            <b>{props.itemInfo.title} </b>
            <span>{props.itemInfo.url}</span>
        </li>
    )
}

export default ListItem;

存檔後畫面顯示的便是 顯示出不同 props 的 ListItem component

表示成功對 component 傳入 props 並顯示出來
接下來介紹 prop 的特性，及另一個 component 內的值--state

prop & state

prop

• prop 不能直接被修改值，不可變(immutable)
• 如果要傳入的值類型是 number，array，object 都要用{}包起來
• 從上層 component 傳遞到下層的 component 中

state

• 在 component 內儲存、變更
• 值可以變動
• 上層 component 的state 可以作為下層 component 的 prop 進行傳遞

Props vs. State

預設的prop值 (default prop)

另外如果想對 component 定義預設的 prop 時，可以使用 .defaultProps

ComponentName.defaultProps = { propName: "some default value" };

要注意的是，需要在 component 被初始化(initialization)後才能設定 defaultProps
原因是不能在 component 初始化前 access 該 component
一樣拿 App.js 示範

import React from "react";

class App extends React.Component {
	render() {
		const { info } = this.props; // 從 props extract info
		return (
			<>
                <h1>{info}</h1>
			</>
		);
	}
}

App.defaultProps = { info: "defaultProps" };

export default App;

成功給予 App 預設的 props